<template>
	<div v-if="topic">
		<!-- 让有数据之后在显示 -->
		<article class="weui-article">
			<h2>{{topic.title}}	
			<!-- 只能修改自己发布的话题 -->
				<x-button type='primary' :mini='true' v-if="topic.author_id ==$store.state.author_id" :link="'/topic/'+topic.id+'/edit'">编辑</x-button>
			<x-button @click.native='coll' type='primary' v-if="topic.is_collect==false" :mini='true'>收藏</x-button>
			<x-button @click.native='colls' :mini='true' v-else>取消收藏</x-button>
			</h2>
			<section>
				<span>
					发表者：
					<a :href="'/#/user/'+topic.author.loginname">{{topic.author.loginname}}</a>
				</span>
				<span>{{topic.visit_count}}次浏览</span>
				<span>
					来自
					<a :href="'/#/topiclist'+topic.tab">{{gettopics(topic.tab)}}</a>
				</span>
			</section>
			<section v-html="topic.content">

			</section>
		</article>
		<!-- 评论的地方 -->
		<group>
			<cell-box v-for='(i,index) in topic.replies' :key="i">
				<flexbox>
					<flexbox-item :span='1/8'>
						<img :src="i.author.avatar_url" alt="" style="width: 30px;height: 30px;">
					</flexbox-item>
					<flexbox-item :span='6/8'>
						<section>
							<div>
								<a :href="'/#/user/'+i.author.loginname">{{i.author.loginname}}</a>
								{{index+1}}楼
							</div>
							<div v-html='i.content'>

							</div>
						</section>
					</flexbox-item>
					<flexbox-item :span='1/8'>
						<span>
							<!-- 点赞    -->
							👍{{i.ups.length}}
						</span>
						<span @click="showPopup(i.id)">
							<!-- 登录才能回复 -->
							回复
						</span>
					</flexbox-item>
				</flexbox>
			</cell-box>
		</group>
		<!-- 评论内容 -->
		<group>
			<x-textarea placeholder="评论内容"></x-textarea>
		</group>
		<x-button type="primary" :mini="true">
			提交
		</x-button>
		<!-- Popup弹出评论 -->
		<div>
			<popup v-model="isshow">
				<group>
					<x-textarea placeholder="评论内容"></x-textarea>
				</group>
				<x-button type="primary" :mini="true">
					提交
				</x-button>
			</popup>
		</div>
	</div>
</template>

<script>
	import {
		CellBox,
		Group,
		Flexbox,
		FlexboxItem,
		WechatEmotion,
		XTextarea,
		XButton,
		Popup
	} from 'vux'
	export default {
		name: 'topic',
		props: ['id'],
		data: function() {
			return {
				topic: null, //将拿到的值放到这里
				isshow: false, //隐藏
			}
		},
		components: {
			CellBox,
			Group,
			Flexbox,
			FlexboxItem,
			WechatEmotion,
			XTextarea,
			XButton,
			Popup
		},
		methods: {
			showPopup: function() {
				this.isshow = true;
			},
			gettopics(tab) {
				return this.$store.getters.gettopic(tab)
			},
			//收藏
			coll:function(){
				var app=this;
				this.$http.post('/topic_collect/collect',{
					accesstoken:this.$store.state.acctoken,
					topic_id :this.topic_id
				}).then(function(res){
					if(res.data.success){
						//说明成功，收藏
						app.topic.is_collect=true;
					}
				})
			},
			//取消收藏
			colls:function(){
				var app=this;
				this.$http.post('/topic_collect/de_collect',{
					accesstoken:this.$store.state.acctoken,
					topic_id :this.topic_id
				}).then(function(res){
					if(res.data.success){
						//说明成功，收藏
						app.topic.is_collect=false;
					}
				})
			},
		},
		//根据id发送ajax请求，获取对应的数据
		// 路由导航守卫 beforeRouteEnter进入之前不能使用this 
		beforeRouteEnter: function(to, from, next) {
			//to 表示将进入的路由文件
			//from 表示即将离开的路由组件
			//next 表示继续执行下一步
			next(function(vm) {
				//vm表示当前实例对象
				vm.$http.get('/topic/' + to.params.id,{
					params:{
						accesstoken:vm.$store.state.acctoken
					}
				}).then(function(res) {
					vm.topic = res.data.data;
				})
			})
		},
		//动态路由切换时的导航守卫
		beforeRouteUpdate: function(to, from, next) {
			this.$http.get('/topic/' + to.params.id,{
				params:{
					accesstoken:this.$store.state.acctoken
				}
			}).then(function(res) {
				this.topic = res.data.data;
			})
			next();
		}
	}
</script>

<style lang='less'>
	/* //预处理
  //引入weui中的文件 */
	@import '~vux/src/styles/weui/weui.less';

</style>
